<template>
<article class="page page-fence-decrypt container">
	<h4 class="text-center">栅栏密码加密解密</h4>
	<form class="content">
		<fieldset>
			<legend>加密</legend>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">原 文</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="originalText" placeholder="请输入要加密的文字">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">栏 数</label>
				<div class="col-9">
					<input type="number" min="0" class="form-control form-control-sm" v-model="fenceCount" placeholder="请输入栅栏数">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">长 度</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="originalTextLen" placeholder="字符串长度" readonly="readonly">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">操 作</label>
				<div class="col-9">
					<x-button type="primary" block @click="encrypt">加 密</x-button>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">结 果</label>
				<div class="col-9">
					<table class="table table-bordered">
						<tbody>
							<tr>
								<th v-for="(v,i) in ['栏数', '加密后', '小写']" :key="`col_${i}`">{{v}}</th>
							</tr>
							<tr v-if="fenceCount && encryption">
								<td>{{fenceCount}}</td>
								<td><pre>{{encryption}}</pre></td>
								<td><pre>{{encryption.toLowerCase()}}</pre></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</fieldset>
		<fieldset>
			<legend>解密</legend>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">密 文</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="cipherText" placeholder="请输入密文">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">长 度</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="cipherTextLen" placeholder="密文长度" readonly="readonly">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">操 作</label>
				<div class="col-9">
					<x-button type="primary" block @click="decrypt">解 密</x-button>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">结 果</label>
				<div class="col-9">
					<table class="table table-bordered">
						<tbody>
							<tr>
								<th v-for="(v,i) in ['栏数', '解密后', '小写']" :key="`col_${i}`">{{v}}</th>
							</tr>
							<tr v-for="(v,i) in deciphered" :key="`row_${i}`">
								<td>{{v.num}}</td>
								<td><pre>{{v.val}}</pre></td>
								<td><pre>{{v.val.toLowerCase()}}</pre></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</fieldset>
	</form>
</article>
</template>

<script>

export default {
	name: 'fence-decrypt',
	data () {
		return {
			originalText: '',
			encryption: '',
			cipherText: '',
			deciphered: [],
			fenceCount: '',
		}
	},
	computed:{
		originalTextLen () {
			return this.originalText.length
		},
		cipherTextLen () {
			return this.cipherText.length
		}
	},
	methods: {
		// 加密
		encrypt () {
			this.encryption = ''
			if (!this.fenceCount || (this.originalTextLen % this.fenceCount !== 0)) {
				this.$toast('栏数不合法！请重新输入！')
				return
			}
			let wordCount = parseInt(this.originalTextLen / this.fenceCount)
			let decodeArr = this.originalText.split('')
			for (let i = 0; i < this.fenceCount; i++) {
				for (let j = 0; j < wordCount; j++) {
					this.encryption += decodeArr[i + j * this.fenceCount]
				}
			}
		},
		// 解密
		decrypt () {
			this.deciphered=[]
			let result = []
			let fenceNum = 2
			let wordNum = 0
			let conversion = ''
			let encodeArr = this.cipherText.split('')
			// fenceNum 为栏数，wordNum 为每组的成员数
			while (fenceNum < this.cipherTextLen) {
				if (this.cipherTextLen % fenceNum === 0) {
					wordNum = this.cipherTextLen / fenceNum
					conversion = ''
					for (let i = 0; i < wordNum; i++) {
						for (let j = 0; j < fenceNum; j++) {
							conversion += encodeArr[i + j * wordNum]
						}
					}
					result.push({num: fenceNum, val: conversion})
				}
				fenceNum++
			}
			this.deciphered = result
		},
	}
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-fence-decrypt {
	display: flex;
	flex-direction: column;
	.content {
		height: 0;
		flex-grow: 1;
		overflow: hidden auto;
		.col-form-label {
			text-align: center;
		}
		fieldset {
			& + fieldset {
				margin-top: 1em;
			}
			.table {
				text-align: center;
				pre {
					padding: 0;
					margin-bottom: 0;
					border: none;
					background-color: none;
				}
			}
		}
	}
}
</style>
